<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多个连接节点</title>
  <script src="./antvx6.js"></script>
  <script src="./layout.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
    window.onload = function () {
      let baseHeight = 300;
      let splitHeight = 66;

      let baseWidth = 0;
      let splitWidth = 180;
      let nodeList = [
        {
          "id": "1",
          "position": {
            "x": baseWidth + splitWidth * 0,
            "y": baseHeight
          },
          "label": "请假申请"
        },
        {
          "id": "2",
          "position": {
            "x": baseWidth + splitWidth * 2,
            "y": baseHeight - splitHeight * 0.8
          },
          "label": "组长审批"
        },
        {
          "id": "3",
          "position": {
            "x": baseWidth + splitWidth * 4,
            "y": baseHeight - splitHeight * 1.3
          },
          "label": "主管审批"
        },
        {
          "id": "4",
          "position": {
            "x": baseWidth + splitWidth * 4,
            "y": baseHeight - splitHeight * 0.2
          },
          "label": "甲方爸爸"
        },
        {
          "id": "5",
          "position": {
            "x": baseWidth + splitWidth * 2,
            "y": baseHeight + splitHeight * 0.8
          },
          "label": '人事审批'
        },
        {
          "id": "6",
          "position": {
            "x": baseWidth + splitWidth * 6,
            "y": baseHeight + splitHeight * 0.8
          },
          "label": "总经理审批"
        },
      ];
      let linkList = [
        {
          "source": "1",
          "target": "2"
        },
        {
          "source": "2",
          "target": "3"
        },
        {
          "source": "2",
          "target": "4"
        },
        {
          "source": "3",
          "target": "6"
        },
        {
          "source": "4",
          "target": "6"
        },
        {
          "source": "1",
          "target": "5"
        },
        {
          "source": "5",
          "target": "6"
        },
      ]

      const Graph = X6.Graph;

      Graph.registerNode(
        'activity',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'text',
              selector: 'label_1',
            },
            {
              tagName: 'text',
              selector: 'label_2',
            },
            {
              tagName: 'text',
              selector: 'label_3',
            },
            {
              tagName: 'text',
              selector: 'label_4',
            },
          ],
          attrs: {
            body: {
              rx: 6,
              ry: 6,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
              strokeWidth: 1,
            },
            label_1: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 12,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `前道项目(201A)`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
            label_2: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 26,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `责任人：张三`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
            label_3: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 40,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `计划完成日期：2022-10-19`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
            label_4: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 54,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `实际完成日期：2022-10-19`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
          },
        },
        true,
      )


      Graph.registerEdge(
        'bpmn-edge',
        {
          inherit: 'edge',
          attrs: {
            line: {
              stroke: '#A2B1C3',
              strokeWidth: 2,
            },
          },
        },
        true,
      )

      const graph = new Graph({
        container: document.getElementById('container'),
        // autoResize: true,
        scroller: true,// zoomToFit需要用到
        width: window.innerWidth,
        height: window.innerHeight,
        interacting: function (cellView) {
          return false;// 禁止节点拖拽 https://blog.csdn.net/qq_43274430/article/details/125763687
        },
        connecting: {
          router: 'orth',// 连线的方式 ['normal','orth','oneSide','manhattan','metro','er']
        },
      })
      console.log(260, graph);

      let cells = [];
      nodeList.forEach(item => cells.push(graph.createNode(Object.assign({}, item, {
        shape: 'activity',
        width: 180,
        height: 66
      }))));
      linkList.forEach(item => cells.push(graph.createEdge(Object.assign({}, item, {
        shape: 'bpmn-edge',
      }))));
      graph.resetCells(cells);
      graph.zoomToFit({ padding: 30, maxScale: 1 });

    }
  </script>
</body>

</html>